<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
  <title>通用配置</title>
</head>

<body>
  <!-- 通用配置---指的是任何图表都能使用的配置
    标题：title
    提示：tooltip
    工具按钮: toolbox
    图例：legend
  -->

  <!-- title
    文字样式：textStyle
    标题边框: borderWidth borderColor borderRadius
    标题位置: left top right bottom
  -->
  <!-- ---tooltip 提示组件，用于配置鼠标滑过或点击图表时的显示框
    触发类型 trigger
      item/axis
    触发时机 triggerOn
      mouseover/click
    格式化 formatter
      字符串模板,回调函数
  -->

  <!-- ---toolbox echarts提供的工具栏 
    内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具
  toolbox:{
    feature:{
      saveAsImage:{}, //导出图片
      dataView:{}, // 数据视图
      restore:{},//重置
      dataZoom:{},//区域缩放
      magicType:{
        // 动态图表类型的切换
        type:['bar','line']
      }
    }
  }
  -->

  <!--  legend 图例，用来筛选系列，需要和series配合使用
    legend中的data是一个数据
    legend中的data的值需要和series数组中某组数据的name值一致
  -->

  <div style="width: 500px;height: 400px;"></div>
  <script>
    var mChart = echarts.init(document.querySelector('div'));
    var xDataArr = ['张三', '李四', '王五', '小明', '小红', '小张'];
    var yDataArr1 = [100, 40, 80, 26, 88, 70];
    var yDataArr2 = [90, 100, 40, 50, 100, 90];
    var option = {
      title: {
        text: '成绩',
        textStyle: {
          color: '#5470c6',
          fontSize: 16
        },
        borderWidth: 1,
        borderColor: '#5470c6',
        left: 40,
        top: 10
      },
      // 提示组件
      tooltip: {
        // trigger: 'item'
        trigger: 'axis',
        triggerOn: 'click',
        // formatter: 'aaaa'
        formatter: function() {
          return 'aaa'
        }
      },
      // toolbox工具栏
      toolbox: {
        feature: {
          saveAsImage: {},
          dataView: {},
          restore: {},
          dataZoom: {},
          magicType: {
            type: ['bar', 'line']
          }
        }
      },
      // 图例筛选
      legend: {
        data: ['语文', '数学']
      },
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '语文',
        type: 'bar',
        data: yDataArr1
      }, {
        name: '数学',
        type: 'bar',
        data: yDataArr2
      }]
    };
    mChart.setOption(option);
  </script>
</body>

</html>